<template>
  <!-- 添加学科对话框  -->
  <el-dialog
    :title="title"
    :visible="isChangeSubjectDialogVisible"
    width="30%"
    @close="changeSubjectDialogClosed"
  >
    <!-- 添加或编辑学科弹层 -->
    <el-form
      :model="changeSubjectForm"
      :rules="changeSubjectFormRules"
      ref="changeSubjectFormRef"
      label-width="80px"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input
          v-model="changeSubjectForm.subjectName"
          placeholder="请输入学科名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="isFrontDisplay">
        <el-switch
          v-model="changeSubjectForm.isFrontDisplay"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="changeSubjectDialogClosed">取 消</el-button>
      <el-button type="primary" @click="changeSubjectsList">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects'

export default {
  name: 'SubjectsAdd',
  components: {},
  props: {
    title: {
      type: String,
      required: true
    },
    isChangeSubjectDialogVisible: {
      type: Boolean,
      required: true
    },
    changeSubjectForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 规则
      changeSubjectFormRules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 发送请求 添加或编辑学科
    changeSubjectsList() {
      const subjectName = this.changeSubjectForm.subjectName
      // 按钮是boolean 需要转换成1/0
      const isFrontDisplay = this.changeSubjectForm.isFrontDisplay ? 1 : 0
      const id = this.changeSubjectForm.id
      // 请求需要的数据
      const data = {
        id,
        subjectName,
        isFrontDisplay
      }
      // 校验是否正确
      this.$refs.changeSubjectFormRef.validate(valid => {
        if (!valid) return
        if (this.changeSubjectForm.isAddOrEdit) {
          // 添加请求
          this.addSubject(data)
        } else {
          // 修改请求
          this.updateSubject(data)
        }
        // 关闭弹框
        this.$parent.isChangeSubjectDialogVisible = false
      })
    },
    // 添加学科
    async addSubject(data) {
      try {
        await add(data)
        this.$message.success('添加成功')
        // 添加成功跳转到第一页
        this.$parent.page = 1
        this.$parent.getSubjectsList()
      } catch (err) {
        this.$message.error('添加失败')
      }
    },
    // 修改学科
    async updateSubject(data) {
      try {
        await update(data)
        this.$message.success('修改成功')
        this.$parent.getSubjectsList()
      } catch (err) {
        this.$message.error('修改失败')
      }
    },
    // 弹框关闭清理尸体
    changeSubjectDialogClosed() {
      this.$parent.isChangeSubjectDialogVisible = false
      // 清空父组件中changeSubjectForm数据
      this.$parent.changeSubjectForm = {
        id: null,
        subjectName: null,
        isFrontDisplay: true
      }
      // 清理尸体
      this.$refs.changeSubjectFormRef.resetFields()
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped></style>
